<!--
 * @Description: File Description
 * @Author: jundie.cheng@hand-china.com
 * @version: H3.0
 * @Date: 2023-03-29 09:48:59
 * @LastEditTime: 2023-03-29 09:50:50
-->
<template>
  <PageLayout full>
    <template #header>
      <HeaderLayout show-back :header-style="headerStyle">
        <view>{{ $t('BIWD.FilterReplaceGuide.Navigate.Title') }}</view>
      </HeaderLayout>
    </template>
    <view class="filterbox">
      <view v-for="(item, index) in htmlList" :key="index">
        <view class="guideBox" :class="{ lineBox: index !== 3 }">
          <view class="guideBoxTitle">
            <view class="boxNumber">
              <text>{{ index + 1 }}</text>
            </view>
            <view class="boxTitle">{{ $t(item) }}</view>
          </view>
          <view class="img-box">
            <image
              v-if="brand === 'SIEMENS'"
              class="appImg"
              style="width: 100%"
              :src="`${imgUrl}ChangeFilter${index + 1}_SE_V3.png`"
              mode="heightFix"
              lazy-load
            ></image>
            <image
              v-else
              class="appImg"
              style="width: 100%"
              :src="`${imgUrl}ChangeFilter${index + 1}_BO_V3.png`"
              mode="heightFix"
              lazy-load
            ></image>
          </view>
        </view>
      </view>
    </view>
  </PageLayout>
</template>
<script setup lang="ts">
import PageLayout from '@/layout/page/page.vue'
import HeaderLayout from '@/layout/page/header.vue'
import netconfig from '@/config/netconfig'
import { onLoad } from '@dcloudio/uni-app'
const headerStyle = {
  backgroundColor: '#fff',
}
const imgUrl = netconfig.ASSETSPRE_ICONS
const htmlList = [
  'BIWD.FilterReplaceGuide.StepOne.Text',
  'BIWD.FilterReplaceGuide.StepTwo.Text',
  'BIWD.FilterReplaceGuide.StepThree.Text',
  'BIWD.FilterReplaceGuide.StepFour.Text',
]

const brand = ref('')

onLoad((query: any) => {
  brand.value = query?.value
})
</script>
<style lang="less">
@import '../style/filterReplaceGuide.less';
</style>
